<!--
 * @Author: zjf
 * @Date: 2023-11-30 14:27:54
 * @LastEditors: zjf
 * @LastEditTime: 2023-12-06 15:07:34
 * @Description: 支付明细
-->
<template>
  <div>
    <l-query :span="8" :items="queryItems" :labelWidth="80" :height.sync="queryHeight" :formData="queryData"
      style="padding: 0 8px" :hasSearch="false" :hasReset="false">
      <template #contractType>
        <l-select v-model="queryData.contractType" :options="contractTypeOptions" @change="handleSearch"></l-select>
      </template>
      <template #contractId>
        <l-select v-model="queryData.contractId" :options="contractList" @change="handleSearch"></l-select>
      </template>
      <template #payType>
        <l-select v-model="queryData.payType" :options='paymentTypeOptions' @change="handleSearch"></l-select>
      </template>
      <template #payTimeQRange>
        <l-date-range v-model="queryData.payTimeQRange" dateType="daterange" @change="handleSearch"></l-date-range>
      </template>
    </l-query>
    <l-table-edit ref="TableEdit" :tableColumns="columns" :tableData="tableData" @table="tableFunc"
      :showSummary="true"></l-table-edit>
  </div>
</template>

<script>
export default {

  props: {
    projectId: String,
  },
  data() {
    return {
      // 查询参数
      queryHeight: 40,
      queryItems: [
        { label: "合同类别", prop: "contractType", },
        { label: "合同名称", prop: "contractId", },
        { label: "支付类型", prop: "payType", },
        { label: "支付时间", prop: "payTimeQRange", },
      ],
      queryData: {
        contractType: '',
        contractId: "",
        payType: "",
        payTimeQRange: ""
      },

      // table参数
      tableData: [],
      columns: [
        { label: "合同名称", prop: "contractId", dataType: 'contract-select', options: [], filed: 'contractType' },
        { label: "合同类别", prop: "contractType", dataType: 'dataItem', dataCode: "contractType" },
        { label: "支付单位", prop: "applyEntity", },
        { label: "支付类型", prop: "payType", dataType: 'dataItem', dataCode: "paymentType" },
        { label: "支付金额(元)", prop: "payAmount", isSummary: true, },
        { label: "支付时间", prop: "payTime", dataType: 'datetime', format: "yyyy-MM-dd" },

      ],
      tableField: {
        contractId: "",
        contractType: "",
        applyEntity: "",
        payType: "",
        payAmount: "0",
        payTime: "",
        isEditing: true,
      },

      contractList: [],

    };
  },
  computed: {
    paymentTypeOptions() { // 支付类型
      return this.lr_dataItemOptions(this.lr_dataItem['paymentType'])
    },
    contractTypeOptions() { // 合同类别
      return this.lr_dataItemOptions(this.lr_dataItem['contractType'])
    },

  },
  created() {
    this.getContractList()
  },
  mounted() {
    this.init()
  },
  methods: {
    async getContractList() {
      const api = window.$crud("project/contract/list");
      const data = await this.$awaitWraper(api.getInfo({ projectId: this.projectId }));
      this.contractList = data.map(v => {
        return {
          label: v.contractName,
          value: v.id,
          contractType: v.contractType,
        }
      })
      this.columns[0].options = this.contractList || []
      this.loading = false
    },
    init() {
      this.getTableData()
    },
    handleSearch() {
      this.getTableData()
    },

    /** 获取列表信息 */
    async getTableData() {
      const api = window.$crud("project/payment/detail/list");
      const data = await this.$awaitWraper(api.getInfo({ projectId: this.projectId }));
      this.tableData = []
      if (data.length) {
        this.tableData = data.map(t => {
          return {
            ...t,
            contractType: t.contractInfo.contractType,
            isEditing: false,
          }
        });
      }
    },

    tableFunc(res) {
      switch (res.type) {
        case 'save':
          this.handleSave(res.data)
          break;
        case 'delete':
          // 删除
          this.handleDelete(res)
          break;
        case 'push':
          // 新增一行
          this.tableData.unshift(this.tableField);
          break;
        default:
          break;
      }
    },

    /** 删除 */
    handleDelete(scope) {
      var index = this.tableData.indexOf(scope.data)
      this.$confirm(this.$t('是否删除该条数据?'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(async () => {
        if (scope.data.id) {
          const api = window.$crud("project/payment/detail");
          await api.remove(scope.data.id)
        }
        this.$message({
          type: 'success',
          message: this.$t('删除成功!')
        })
        this.tableData.splice(index, 1);

      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('已取消删除!')
        })
      })
    },
    /** 保存 */
    async handleSave(data) {
      var res = null
      data.projectId = this.projectId
      if (data.id) {
        // 编辑
        res = await this.$awaitWraper(window.$crud('project/payment/detail').update(data.id, data));
      } else {
        // 新增
        res = await this.$awaitWraper(window.$crud('project/payment/detail/info').add(data));
      }
      if (res) {
        this.$refs.TableEdit.handleCloseEdit(data) // 表格 关闭编辑
        this.$message({
          type: "success",
          message: '保存成功',
        });
      }
    },
  }
};
</script>
<style lang="scss" scoped></style>